<template>
<div class="news-box">
  <div class="news-title">
    最新动态
    <el-divider></el-divider>
  </div>
  <div class="news-content">
    <div class="news-content-left">
      <!--<img  width="100%" height="200px" :src="newsList[0].img" alt="">-->
      <img  width="100%" height="200px" :src="getImgURL(newsList[0].img)" alt="">
      <p style="text-indent: 2em;font-size: 20px;margin-top: 10px"><a href="">{{newsList[0].title}}</a></p>
      <p style="text-indent: 2em;font-size: 15px;font-weight: lighter">{{newsList[0].detail}}</p>
      <p style="font-size: small;font-weight: lighter;margin-top: 10px">{{newsList[0].createTime}}</p>
    </div>
    <div class="news-content-right">
      <NewList v-for="i in 3" :news="newsList[i]"></NewList>
    </div>
  </div>
  
</div>
</template>

<script>
import NewList from "@/components/NewList";
import axios from "axios";
export default {
  name: "NewsContent",
  components:{
    NewList
  },
  data(){
   return{
     newsList: [
       {
         id:'1',
         img:'../public/img.png',
         title: '美国版B站 Crunchyroll 可能要10亿美元卖掉了？',
         detail: '这里是一些新闻的描述信息这里是一些新闻的描述信息这里是一些新闻的描述信息这里是一些新闻的描述信息这里是一些新闻的描述信息这里是一些新闻的描述信息这里是一些新闻的描述信息' ,
         createTime: '2023-7-24 13:14:24',
       },
       {
         id:'2',
         img:'../assets/img/jinx.jpg',
         title: '爱彼迎：今年国境假期可住6人及以上房源的预定比例同比增长超两成',
         detail: '这里是一些新闻的描述信息这里是一些新闻的描述信息这里是一些新闻的描述信息这里是一些新闻的描述信息这里是一些新闻的描述信息这里是一些新闻的描述信息这里是一些新闻的描述信息' ,
         createTime: '2023-7-24 13:14:24',
       },
       {
         id:'3',
         img:'../assets/img/jinx.jpg',
         title: '这是一个简单的新闻标题3',
         detail: '这里是一些新闻的描述信息这里是一些新闻的描述信息这里是一些新闻的描述信息这里是一些新闻的描述信息这里是一些新闻的描述信息这里是一些新闻的描述信息这里是一些新闻的描述信息' ,
         createTime: '2023-7-24 13:14:24',
       },
       {
         id:'4',
         img:'../assets/img/jinx.jpg',
         title: '这是一个简单的新闻标题4',
         detail: '这里是一些新闻的描述信息这里是一些新闻的描述信息这里是一些新闻的描述信息这里是一些新闻的描述信息这里是一些新闻的描述信息这里是一些新闻的描述信息这里是一些新闻的描述信息' ,
         createTime: '2023-7-24 13:14:24',
       },
       
     ],
   }
  },
  methods: {
    initNewList(){
      axios.get('/FinancialRecommend/new/list')
      .then(response => {
        this.newsList = response.data.data
      })
    } ,
    getImgURL(url){
      return 'http://localhost:8888/FinancialRecommend' + url
    },
  },
  created() {
    this.initNewList()
  }
}
</script>

<style lang="less" scoped>
.news-box{
  width: 65%;
  height: 500px;
  /*background-color: #8f939f;*/
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
  margin-right:20px;
}
*{
  margin: 0 0;
  padding: 0 0;
  font-family: "钉钉进步体 Regular";
}
.news-box:hover{
  box-shadow:  0 2px 20px 6px rgba(0, 0, 0, 0.12);
}
.news-title{
  font-size: larger;
  font-weight: lighter;
  width: 100%;
  height: 80px;
  padding: 20px;
  box-sizing: border-box;
  //background-color: red;
}
.news-content{
  width: 100%;
  height: 420px;
  display: flex;
  //background-color: skyblue;
  box-sizing: border-box;
  padding: 20px;
}
.news-content-left{
  //background-color: green;
  margin-right: 20px;
  width: 50%;
}
.news-content-right{
  //background-color: gray;
  width: 50%;
}
a {
  text-decoration: none;
  color: black; /* 或者与父元素的文本颜色相同 */
}

a:hover {
  text-decoration: underline;
  color: inherit; /* 还原为继承的文本颜色 */
}
</style>
